<template>
  <div class="bottom_list">
    <div>
      <svg
        t="1646825015435"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="12485"
        width="30"
        height="30"
      >
        <path
          d="M192 789.333333a21.24 21.24 0 0 1-12.8-4.28 344.513333 344.513333 0 0 1-99.333333-118A341.246667 341.246667 0 0 1 384 170.666667h256q6.36 0 12.733333 0.233333l-49.153333-49.146667a21.333333 21.333333 0 0 1 30.173333-30.173333l85.333334 85.333333a21.333333 21.333333 0 0 1 0 30.173334l-85.333334 85.333333a21.333333 21.333333 0 0 1-30.173333-30.173333l48.666667-48.666667Q646.126667 213.333333 640 213.333333H384c-164.666667 0-298.666667 134-298.666667 298.666667 0 94.833333 43.546667 181.933333 119.48 238.966667A21.333333 21.333333 0 0 1 192 789.333333z m228.433333 143.06a21.333333 21.333333 0 0 0 0-30.173333l-49.153333-49.146667q6.366667 0.233333 12.733333 0.233334H640a341.46 341.46 0 0 0 304.146667-496.42 344.513333 344.513333 0 0 0-99.333334-118 21.333333 21.333333 0 1 0-25.626666 34.113333C895.12 330.066667 938.666667 417.166667 938.666667 512c0 164.666667-134 298.666667-298.666667 298.666667H384q-6.12 0-12.246667-0.246667l48.666667-48.666667a21.333333 21.333333 0 0 0-30.173333-30.173333l-85.333334 85.333333a21.333333 21.333333 0 0 0 0 30.173334l85.333334 85.333333a21.333333 21.333333 0 0 0 30.173333 0zM384 533.333333a21.333333 21.333333 0 1 1-21.333333-21.333333 21.333333 21.333333 0 0 1 21.333333 21.333333z m149.333333-21.333333a21.333333 21.333333 0 1 0 21.333334 21.333333 21.333333 21.333333 0 0 0-21.333334-21.333333z m170.666667 0a21.333333 21.333333 0 1 0 21.333333 21.333333 21.333333 21.333333 0 0 0-21.333333-21.333333z"
          fill="#FFFFFF"
          p-id="12486"
        ></path>
      </svg>
    </div>

    <div @click="$emit('last_sing')">
      <svg
        t="1646824188015"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5789"
        width="30"
        height="30"
      >
        <path
          d="M364.302083 465.602819L687.954365 218.588294c38.416414-29.327534 93.791393-1.929039 93.791392 46.396277v494.029051c0 48.325316-55.374979 75.725617-93.791392 46.398084L364.302083 558.397181c-30.600916-23.357989-30.600916-69.436372 0-92.794362zM238.945254 780.798397V451.684117v-164.562559c0-19.628152-5.904521-60.475733 17.057907-75.841215 25.523642-17.068744 59.747828 1.210165 59.747828 31.919454v493.676839c0 19.628152 5.915358 60.473927-17.047069 75.841215-25.53448 17.068744-59.758666-1.211971-59.758666-31.919454z"
          fill="#FFFFFF"
          p-id="5790"
        ></path>
      </svg>
    </div>

    <!-- <div> -->
    <div v-if="!playing" @click.stop="$emit('play-ing')" style="margin-top:2px">
      <svg
        t="1646823872186"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="4385"
        width="30"
        height="30"
      >
        <path
          d="M512 0C230.4 0 0 230.4 0 512s230.4 512 512 512 512-230.4 512-512S793.6 0 512 0z m0 981.333333C253.866667 981.333333 42.666667 770.133333 42.666667 512S253.866667 42.666667 512 42.666667s469.333333 211.2 469.333333 469.333333-211.2 469.333333-469.333333 469.333333z"
          p-id="4386"
          fill="#FFFFFF"
        ></path>
        <path
          d="M672 441.6l-170.666667-113.066667c-57.6-38.4-106.666667-12.8-106.666666 57.6v256c0 70.4 46.933333 96 106.666666 57.6l170.666667-113.066666c57.6-42.666667 57.6-106.666667 0-145.066667z"
          p-id="4387"
          fill="#FFFFFF"
        ></path>
      </svg>
    </div>

    <div v-else @click.stop="$emit('pause-ing')" style="margin-top:2px">
      <svg
        t="1646824014789"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5225"
        width="30"
        height="30"
      >
        <path
          d="M512 1024C228.266667 1024 0 795.733333 0 512S228.266667 0 512 0s512 228.266667 512 512-228.266667 512-512 512z m0-42.666667c260.266667 0 469.333333-209.066667 469.333333-469.333333S772.266667 42.666667 512 42.666667 42.666667 251.733333 42.666667 512s209.066667 469.333333 469.333333 469.333333z m-106.666667-682.666666c12.8 0 21.333333 8.533333 21.333334 21.333333v384c0 12.8-8.533333 21.333333-21.333334 21.333333s-21.333333-8.533333-21.333333-21.333333V320c0-12.8 8.533333-21.333333 21.333333-21.333333z m213.333334 0c12.8 0 21.333333 8.533333 21.333333 21.333333v384c0 12.8-8.533333 21.333333-21.333333 21.333333s-21.333333-8.533333-21.333334-21.333333V320c0-12.8 8.533333-21.333333 21.333334-21.333333z"
          p-id="5226"
          fill="#FFFFFF"
        ></path>
      </svg>
    </div>

    <!-- </div> -->

    <div @click="$emit('next_sing')">
      <svg
        t="1646824264097"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="7476"
        width="30"
        height="30"
      >
        <path
          d="M655.706179 465.602819L332.053897 218.588294c-38.414608-29.327534-93.791393-1.929039-93.791392 46.396277v494.029051c0 48.325316 55.376785 75.725617 93.791392 46.398084l323.652282-247.014525c30.602722-23.357989 30.602722-69.436372 0-92.794362zM781.064814 780.798397V451.684117v-164.562559c0-19.628152 5.904521-60.475733-17.057907-75.841215-25.523642-17.068744-59.747828 1.210165-59.747828 31.919454v493.676839c0 19.628152-5.915358 60.473927 17.047069 75.841215 25.532673 17.068744 59.758666-1.211971 59.758666-31.919454z"
          fill="#FFFFFF"
          p-id="7477"
        ></path>
      </svg>
    </div>

    <div @click="$parent.$parent.showMyPlayList = true" style="margin-top:4px">
      <svg
        t="1646461355954"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="5232"
        width="25"
        height="25"
      >
        <path
          d="M981.333333 917.333333a21.333333 21.333333 0 0 1-21.333333 21.333334H64a21.333333 21.333333 0 0 1 0-42.666667h896a21.333333 21.333333 0 0 1 21.333333 21.333333zM405.333333 170.666667h554.666667a21.333333 21.333333 0 0 0 0-42.666667H405.333333a21.333333 21.333333 0 0 0 0 42.666667z m554.666667 341.333333H64a21.333333 21.333333 0 0 0 0 42.666667h896a21.333333 21.333333 0 0 0 0-42.666667zM56.873333 252.893333a26.573333 26.573333 0 0 0 27.48-1.56l117.333334-80a26.666667 26.666667 0 0 0 0-44.066666l-117.333334-80A26.666667 26.666667 0 0 0 42.666667 69.333333v160a26.6 26.6 0 0 0 14.206666 23.56z"
          fill="#FFFFFF"
          p-id="5233"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    playing: Boolean,
    currentPLayList: Array,
  },
};
</script>

<style lang="less">
.bottom_list {
  padding: 0 20px;
  margin-top: 35px;
  display: flex;
  justify-content: space-between;
}
</style>